<!--
 * @Description: 
 * @Author: 若城
 * @Date: 2019-08-22 19:41:20
 * @LastEditTime: 2023-03-30 00:23:28
-->
<template>
  <view>
    <scroll-view>
      <view class="headerCls">
        <u-image
          width="750rpx"
          height="296rpx"
          src="/static/1.png"
          mode="widthFix"
        ></u-image>
        <text @click="handleGo" class="optWord">{{ optWord }}</text>
      </view>
      <u-image
        width="750rpx"
        height="192rpx"
        src="/static/center.png"
        mode="widthFix"
      ></u-image>
      <view class="myImg">
        <u-image
          v-for="item in list"
          :key="item.id"
          :width="item.width + 'rpx'"
          :height="item.height + 'rpx'"
          :src="item.img"
          @click="handleImg(item.id)"
          mode="widthFix"
        ></u-image>
      </view>
      <u-image
        width="750rpx"
        height="235rpx"
        src="/static/centerbot.png"
        mode="widthFix"
      ></u-image>
      <!-- <view>
        <u-grid :border="false" col="4">
          <u-grid-item v-for="(listItem, listIndex) in list" :key="listIndex">
            <u-icon
              :customStyle="{ paddingTop: 20 + 'rpx' }"
              :name="listItem.name"
              :size="22"
            ></u-icon>
            <text class="grid-text">{{ listItem.title }}</text>
          </u-grid-item>
        </u-grid>
      </view> -->
      <view class="banner">
        <u-swiper :list="bannerList" :autoplay="true" :radius="15"></u-swiper>
      </view>

      <u-image
        width="750rpx"
        height="323rpx"
        src="/static/2.png"
        mode="widthFix"
      ></u-image>
      <u-image
        width="750rpx"
        height="1233rpx"
        src="/static/3.png"
        mode="widthFix"
      ></u-image>
      <u-image
        width="750rpx"
        height="289rpx"
        src="/static/4.png"
        mode="widthFix"
      ></u-image>
    </scroll-view>
    <u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
      <u-image
        width="750rpx"
        height="74rpx"
        src="/static/footer.png"
        mode="widthFix"
      ></u-image>
    </u-tabbar>
  </view>
</template>
<script>
import single1 from "../../static/single1.png";
import single2 from "../../static/single2.png";
import single3 from "../../static/single3.png";
import single4 from "../../static/single4.png";
import banner1 from "../../static/banner/banner1.png";
import banner2 from "../../static/banner/banner2.png";
import banner3 from "../../static/banner/banner3.png";

export default {
  onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
    // console.log(option.id); //打印出上个页面传递的参数。
    // console.log(option.name); //打印出上个页面传递的参数。

    this.optWord = option.ads || '平潭综合实验区';
  },
  data() {
    return {
      optWord: "平潭综合实验区",
      bannerList: [banner1, banner2, banner3],
      list: [
        {
          id: 1,
          img: single1,
          width: "111",
          height: "140",
        },
        {
          id: 2,
          img: single2,

          width: "111",
          height: "140",
        },
        {
          id: 3,
          img: single3,

          width: "111",
          height: "140",
        },
        {
          id: 4,
          img: single4,
          width: "135",
          height: "153",
        },
      ],
    };
  },
  methods: {
    handleImg(id) {
      switch (id) {
        case 1:
          uni.navigateTo({
            url: "/pages/socialSecurity/socialDetail",
          });
          break;
        case 2:
          break;
        case 3:
          uni.navigateTo({
            url: "/pages/reserved/reservedServe",
          });
          break;
        case 4:
          break;

        default:
          break;
      }
    },
    handleGo() {
      uni.navigateTo({
        url: `/pages/index/address?ads=${this.optWord}`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.myImg {
  display: flex;
  justify-content: space-around;
}
.banner {
  width: 693rpx;
  height: 150rpx;
  margin: 0 auto;
}
.headerCls {
  position: relative;
  .optWord {
    width: 136rpx;
    height: 28rpx;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; // 默认不换行；
    position: absolute;
    left: 28rpx;
    top: 31rpx;
    font-size: 25rpx;
    color: #fff;
  }
}
</style>